<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../../lib/swiper/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../../lib/mescroll/mescroll.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../../static/css/aui.min.css"/>
		<title>侧边选项卡-点击切换+上下拉加载刷新</title>
		<style>
			.content-left-scroll{width: 120px; height: -webkit-calc(100vh - 50px); height: calc(100vh - 50px); background: #F4F4F4; overflow: hidden; overflow-y: scroll; display: inline-block; position: absolute; top: 50px; left: 0;}
			.content-left-warp{width: 100%; height: auto;} 
			.content-left-scroll li{width: 100%; height: 55px; line-height: 55px; text-align: center; font-size: 15px; color: #333;}
			.content-left-scroll li.active{width: 121px; color: var(--aui-color); background: #FFF; position: relative; z-index: 2;}
			.content-left-scroll li.active:before{content: ''; width: 2px; height: 55px; background: var(--aui-bg); border-radius: 3px; position: absolute; top: 0; left: 0;}
			.content-right-scroll{width: -webkit-calc(100vw - 120px); width: calc(100vw - 120px); height: -webkit-calc(100vh - 50px); height: calc(100vh - 50px); background: #FFF; overflow: hidden; overflow-y: scroll; position: absolute; top: 50px; left: 120px;}
			.content-right-warp{width: 100%; height: auto; padding: 15px 10px; box-sizing: border-box; font-size: 0;}
			.content-right-scroll li{width: 33.33%; margin-bottom: 10px; padding: 0 0px; box-sizing: border-box; text-align: center; display: inline-block; vertical-align: top;}
			.content-right-scroll li img{width: 40px; margin-bottom: 5px;}
			.content-right-scroll li p{width: 100%; line-height: 20px; font-size: 12px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
			.mescroll{height: -webkit-calc(100vh - 50px);}
			.mescroll-downwarp .downwarp-progress,
			.mescroll-upwarp .upwarp-progress{width: 20px; height: 20px; border: none; color: var(--aui-red-f5); position: relative; top: -1px;}
			.mescroll-downwarp .downwarp-progress i,
			.mescroll-upwarp .upwarp-progress i{display: inline-block; text-align: center; font-size: 20px;}
			.mescroll-downwarp .downwarp-tip,
			.mescroll-upwarp .upwarp-tip,
			.mescroll-upwarp .upwarp-nodata{position: relative; top: 1px; font-size: 13px;}
			.mescroll-rotate{animation: mescrollRotate .5s linear infinite;}
		</style>
	</head>
	<body>		
	    <div class="container" id="app">
			<header class="aui-header">
				<a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
				<div class="aui-header-title" style="font-size: 16px;">侧边选项卡-点击切换+上下拉加载刷新</div>
			</header>
	    	<div class="aui-content" v-cloak  >				
				<div class="content-left-scroll col-after">
					<div class="content-left-warp">
						<ul>
							<li class="row-after" v-for="(item, index) in items.leftData" :class="{'active' : currentLeftIndex==index}" :index="index" @click.stop="chooseLeftLi($event)">{{item.name}}</li>
						</ul>
					</div>
				</div>
				<div class="content-right-scroll mescroll" id="mescroll">
					<div class="content-right-warp">
						<ul id="dataList" class="data-list">
							<li  v-for="(item, index) in items.rightData[currentLeftIndex]">
								<div class="img"><img :src="item.img" alt=""></div>
								<p class="name">{{item.name}}</p>
							</li>
						</ul>					
					</div>
				</div>
	    	</div>			
	    </div>
		<script type="text/javascript" charset="utf-8" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	    <script type="text/javascript" src="../../../lib/vue.min.js"></script>
	    <script type="text/javascript" src="../../../lib/jquery/jquery-2.1.3.min.js"></script>
		<script type="text/javascript" src="../../../lib/swiper/swiper-2.3.1.min.js"></script>
		<script type="text/javascript" src="../../../lib/mescroll/mescroll.min.js"></script>
	    <script type="text/javascript" src="../../../static/js/aui.min.js"></script>
	   	<script type="text/javascript">
	   		window.onload = function(){				
	   			apiready();
	   		}
	   		apiready = function() {
	   			var vm = new Vue({
	   				el: "#app",
	   				data: {							   											
						currentLeftIndex: 0,
						items: {
							leftData: [],
							rightData: []
						},
	   				},
	   				created: function(){
	   					var _this = this;
						
	   				},
	   				mounted: function() {
	   					var _this = this;	
						_this.getData();
						_this.mescrollFn();
	   	            },
	   	            updated: function () {
	   	                var _this = this;
	   	                _this.$nextTick(function () {
	   		
	   	                })
	   	            },
	   	            methods: {
						getData(){
							var _this = this;
							for(var i = 0; i < 20; i++){
								_this.items.leftData.push({
									name: '一级菜单'+(i+1), 
									id: i,
								});
								var arr = [];
								for(var j = 0; j < 30; j++){
									arr.push({
										name: '二级菜单'+(i+1)+'-'+(j+1), id: i, 
										img: 'http://pic2.sc.chinaz.com/files/pic/pic9/201910/bpic14122.jpg',
									});
								}
								_this.items.rightData.push(arr);
							}
						},
						//左侧选择
						chooseLeftLi(e){
							var _this = this,
								el = e.currentTarget,								
								index = Number($(el).attr("index"));
							_this.currentLeftIndex = index;
							$(".content-left-scroll").animate({
								scrollTop: e.currentTarget.offsetTop - ($(window).height() - $(el).height() - 54) / 2
							},200);														
						},							
						//下拉刷新+上拉加载更多
						mescrollFn: function(){
							var _this = this;
							//创建MeScroll对象
							_this.mescroll = new MeScroll("mescroll", {
								down:{
									htmlContent: '<p class="downwarp-progress"><i class="iconfont iconloading7"></i></p><p class="downwarp-tip">加载中</p>', //布局内容									
								},
								up: {
									htmlLoading: '<p class="upwarp-progress mescroll-rotate"><i class="iconfont iconloading7"></i></p><p class="upwarp-tip">加载中..</p>',
									callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
									htmlNodata: '<p class="upwarp-nodata">没有更多了</p>',
									isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
									noMoreSize: 8, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
									empty: {
										warpId: "dataList",
										icon: "../../img/image/no-data.png", //图标,默认null
										tip: "暂无数据", //提示
									},
									lazyLoad: {
										use: true // 是否开启懒加载,默认false
									},
								},
							});
							/*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
							function upCallback(page){
								//联网加载数据
								setTimeout(()=>{
									_this.mescroll.endErr();
								},1000); return;
								getListDataFromNet(page.num, page.size, function(PageData){
									//_this.mescroll.endByPage(PageData.length); //必传参数(当前页的数据个数, 总页数)
									// _this.mescroll.endBySize(PageData.length, _this.totalSize);
									var timer = setTimeout(function(){
										_this.mescroll.endByPage(PageData.length); //必传参数(当前页的数据个数, 总页数)
										//_this.mescroll.endBySize(PageData.length, _this.totalSize);
										clearTimeout(timer);
									},300);
									//设置列表数据
									if(page.num == 1)
									{
										_this.items = [];
									}
									_this.items = _this.items.concat(PageData);
									// console.log(JSON.stringify(_this.items));
								}, function(){
									//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
									_this.mescroll.endErr();
								});
							}
							function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
								app.ajax({
									url: app.url,
									type: 'post',
									data: {
										page: pageNum,
										page_num: pageSize,
									},
									success: function(ret){
										//console.log(JSON.stringify(ret));
										var listData=[];
										ret.adv_scroll && ret.adv_scroll.length > 0 ? _this['banner'] = ret.adv_scroll : '';
										//_this.totalSize = ret.pages; //总页数											
										if(ret.course)
										{
											for (var i = 0; i < ret.course.length; i++) {
												if(i==ret.course.length) break;
												listData.push(ret.course[i]);
											}
										}
										//回调
										successCallback(listData);
									},
									error: function(ret,err){
										//console.log(JSON.stringify(err));
										errorCallback()
									}
								});
							}
						},
	   	            }
	   			});
	   		}
	   	</script>
	</body>
</html>
